<template>
  <view class="order-pop">
    <uni-popup
      ref="messagePop"
      type="bottom"
      border-radius="10px 10px 0 0"
      background-color="#fff"
      @maskClick="closePop"
    >
      <view class="order-detail">
        <text style="padding: 20rpx 0; border-bottom: 1rpx solid #e5e5e5">联系信息</text>
        <view class="memberCard">
          <view class="fields-item" v-for="(item, index) in fieldsList" :key="index">
            <view class="fields-left"><text style="color: red">*</text>{{ item.filedItem }}：</view>
            <view class="fields-right" v-if="item.itemKey != 'address'">
              <input
                class="inquire-input"
                v-model="formData[item.itemKey]"
                type="text"
                :placeholder="item.placeInfo"
              />
            </view>

            <view class="fields-right" v-else @tap="chooseAddress">
              <text class="address-text">{{
                formData.address ? formData.address : '请选择地址'
              }}</text>
            </view>
            <text style="color: red" v-if="item.isfocus">{{ item.placeInfo }}</text>
          </view>
        </view>
        <button type="primary" class="submit-btn" @tap="submitInquire">提交咨询</button>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { checkPhone } from '@/utils'
const pops = withDefaults(defineProps<{ isShowPop: boolean }>(), {
  isShowPop: false,
})
const emit = defineEmits(['closeDialog'])
const messagePop = ref() //弹窗实例对象
const formData = ref<Record<string, any>>({
  name: '',
  phone: '',
  address: '',
  remark: '',
})

// const isfocus = ref(false) //是否聚焦
watch(
  () => pops.isShowPop,
  (newValue: any) => {
    console.log(newValue)
    if (newValue) messagePop.value?.open()
  },
)

const fieldsList = ref<Record<string, any>>([
  { filedItem: '姓名', placeInfo: '  请输入姓名', itemKey: 'name', isfocus: false },
  { filedItem: '电话', placeInfo: '  请输入正确电话', itemKey: 'phone', isfocus: false },
  { filedItem: '地址', placeInfo: '  请输入地址', itemKey: 'address', isfocus: false },
  { filedItem: '备注', placeInfo: '  请输入备注', itemKey: 'remark', isfocus: false },
])

// 弹窗关闭
const closePop = () => {
  console.log('弹窗关闭')
  emit('closeDialog')
}

const chooseAddress = () => {
  uni.chooseAddress({
    success(res) {
      const { provinceName, cityName, countyName, detailInfo } = res
      formData.value.address = provinceName + cityName + countyName + detailInfo
    },
  })
}

const submitInquire = () => {
  let invalidCount = 0 // 改为invalidCount以更清晰地表示未通过验证的表单项数量
  fieldsList.value.forEach((field: any) => {
    const key = field.itemKey
    if (formData.value[key] === '' || (key === 'phone' && !checkPhone(formData.value[key]))) {
      field.isfocus = true
      invalidCount++ // 只有当表单项未通过验证时，invalidCount才增加
    } else {
      field.isfocus = false // 其余情况下，标记为已验证
    }
  })
  if (invalidCount === 0) {
    // 如果所有表单项都通过验证
    uni.showToast({
      title: '提交成功',
    })
    console.log(formData.value) // 打印表单数据
    // 可以在这里添加提交表单的逻辑
  }
}
</script>

<style lang="scss" scoped>
// 订单弹窗
.order-pop {
  .order-detail {
    // height: 936rpx;
    overflow: hidden;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 20rpx 20rpx 40rpx 20rpx;
    border-radius: 22rpx 22rpx 0 0;
    .memberCard {
      background-color: #ffffff;
      margin-top: 20rpx;
      border-radius: 22rpx;
      padding: 0 20rpx 20rpx 20rpx;
      // height: 600rpx;
      overflow: scroll;
      .fields-item {
        font-size: 32rpx;
        .fields-left {
          width: 180rpx;
          padding: 20rpx 0;
        }
        .fields-right {
          padding: 20rpx 0;
          background-color: #f1f1f1;
          border-radius: 6rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .inquire-input {
            padding-left: 20rpx;
            width: 100%;
            color: #808080;
          }
          .address-text {
            padding-left: 40rpx;
            width: 100%;
            color: #808080;
          }
        }
      }
    }
    .submit-btn {
      // padding-top: 20rpx;
      width: 100%;
      margin-top: 20rpx;
      border-radius: 5000rpx;
    }
    .bottom-bar {
      position: fixed;
      z-index: 9999999;
      width: 100%;
      bottom: 0;
      left: 0;
      padding-bottom: env(safe-area-inset-bottom);
      display: flex;
      align-items: center;
      .price-box {
        padding: 0 10rpx;
        .text-price {
          color: #f11d27;
        }
        .fuhao {
          font-size: 28rpx;
          padding-right: 10rpx;
        }
      }
      .button-box {
        flex: 1;
        margin: 10rpx 0;
        padding: 0rpx 20rpx;
        .button-one {
          width: 100%;
          background-color: #f11d27;
          color: #ffffff;
          border-radius: 46rpx;
        }
      }
    }
  }
}
</style>
